<template>
  <div id="satisfaction">
    <div id="section" class="section">
      <header><span></span> 整改单完成情况</header>
      <div class="satisfaction-table" id="satisfaction-table"  :style="{
        'margin': isMobile ? '' : '0px 26px 0 26px !important',
         height: isMobile ? '' : 'calc(100% - 80px)'
      }">
        <el-table
          v-if="rectification.length && isShow"
          :data="rectification"
          header-cell-class-name="text-center satisfaction-table_nowrap"
          :height="TableHeight"
        >
          <el-table-column label="整改单位" :min-width="isMobile ? 100 : 200">
            <template slot-scope="pros">
              <div class="name">
                {{ pros.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="质量整改"  :min-width="isMobile ? 80 : 120">
            <template slot-scope="pros">
              <div class="all quality-all">
                <div class="inner"></div>
                <div class="count">{{ pros.row.quality }}</div>
              </div>
              <div class="complete quality-complete">
                <div
                  class="inner"
                  :style="{
                    width:
                      (pros.row.qualityComplete / pros.row.quality) * 100 + '%',
                  }"
                ></div>
                <div class="count">{{ pros.row.qualityComplete }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="安全整改" :min-width="isMobile ? 80 : 120">
            <template slot-scope="pros">
              <div class="all security-all">
                <div class="inner"></div>
                <div class="count">{{ pros.row.security }}</div>
              </div>
              <div class="complete security-complete">
                <div
                  class="inner"
                  :style="{
                    width:
                      (pros.row.securityComplete / pros.row.security) * 100 +
                      '%',
                  }"
                ></div>
                <div class="count">{{ pros.row.securityComplete }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="整改完成率" :min-width="isMobile ? 80 : 120">
            <template slot-scope="pros">
              <div class="completion">
                {{ pros.row.completion }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getSatisfactionDegree } from '@/api/api'
import { isMobile, DebounceImmediate } from '@/utils/index'
import { rectification } from '@/json/clues.json'

export default {
  data () {
    return {
      TableHeight: null,
      isShow: true,
      listArr: [],
      arr: []
    }
  },
  watch: {
    TableHeight (val) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
      }, 100)
    }
  },
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    rectification: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    /**
     * 获取每个大类下的满意度数量
     * @param        { Array }    arr  每个类别数据
     * @return       { Array }    tep  满意度数量集合
     * */
    getItemData: function (arr) {
      const tep = []
      arr.forEach((v) => {
        tep.push(v.count)
      })
      return tep
    },

    /**
     *计算每个圆环的宽度
     * */
    computedItemWIdth: function (parantWidth, arr) {
      let list = []
      if (arr) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i]
          const obj = {}
          obj.name = nameList[i]
          obj.data = this.getItemData(element)
          list.push(obj)
        }
      } else {
        list = this.listArr
      }
      list.forEach((v) => {
        if (parantWidth > 600) {
          v.width = parantWidth / 5
        } else {
          v.width = 120
        }
      })
      this.cluesList = list
      this.isShow = true
      this.$forceUpdate()
    },

    /**
     * 获取满意度数据
     * */
    getSatisfactionDegreeData: async function () {
      this.arr = []
      await getSatisfactionDegree({}).then((response) => {
        this.arr.push(response['工程进度'])
        this.arr.push(response['工程质量'])
        this.arr.push(response['履约能力'])
        this.arr.push(response['整体服务'])
        this.arr.push(response['人员素质'])
      })
      const sectionWidth = $('#section').width()
      this.computedItemWIdth(sectionWidth, this.arr)
    },
    resizePage: DebounceImmediate(
      function () {
        this.isShow = true
        const sectionWidth = $('#section').width()
        this.computedItemWIdth(sectionWidth, this.arr)
      },
      false,
      500
    )
  },
  mounted: async function () {
    this.$EventBus.$on('loadEnd', () => {
      const num = this.isMobile ? 0 : 68
      const TableHeight = $('#section').height() - num
      console.log($('#section').height())
      this.TableHeight = TableHeight
      this.$forceUpdate()
    })

    $(window).resize((v) => {
      const num = this.isMobile ? 0 : 80
      const TableHeight = $('#section').height() - num
      this.TableHeight = TableHeight
      this.$forceUpdate()
    })
  }
}
</script>
<style lang="scss" scoped>
#satisfaction {
  overflow: hidden;
  border: 1px solid #ffffff;
  height: 100%;
  .section {
    height: 100%;
    overflow: hidden;
  }
  header {
    margin: 10px 26px 0 26px !important;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-content: center;
    align-items: center;
    height: 60px;
    line-height: 60px;
    span {
      background: #008dfb;
      height: 16px;
      width: 4px;
      display: inline-block;
      margin-right: 10px;
    }
  }
  .satisfaction-table {
    .name,
    .completion {
      text-align: center;
      color: #ffffff;
      font-size: 14px;
      padding-top: 20px;
    }
    .all {
      height: 14px;
      display: flex;
      margin-top: 16px;
      .inner {
        background: #9ed286;
        border: 1px solid #717578;
        height: 14px;
        flex: 1;
      }
      .count {
        width: auto;
        margin-left: 4px;
        color: #ffffff;
        font-size: 14px;
      }
    }
    .complete {
      height: 14px;
      display: flex;
      .inner {
        border: 1px solid #717578;
        background: #00b3f6;
        height: 14px;
      }
      .count {
        width: auto;
        margin-left: 4px;
        color: #ffffff;
        font-size: 14px;
      }
    }
  }
   .quality-all, .quality-complete {
               margin-right:4px;
            }
            .security-all, .security-complete {
              margin-left:4px;
            }
}

.f-16 {
  font-size: 16px !important;
}
</style>
